<template>
	<div class="leftBox">
		<div class="row">
			<label>内球质量m1(kg)：</label>
			<input type="number" v-model.number="m1" min="0" />
		</div>
		<div class="row">
			<label>外球质量m2(kg)：</label>
			<input type="number" v-model.number="m2" min="0" />
		</div>
		<div class="row">
			<label>内杆长度l1(m)：</label>
			<input type="number" v-model.number="l1" @change="preview" min="0" />
		</div>
		<div class="row">
			<label>外杆长度l2(m)：</label>
			<input type="number" v-model.number="l2" @change="preview" min="0" />
		</div>
		<div class="row">
			<label>重力加速度g(m/s²)：</label>
			<input type="number" v-model.number="g" min="0" />
		</div>
		<div class="row">
			<label>内球释放角速度ω1(°/s)：</label>
			<input type="number" v-model.number="initialOmega1" />
		</div>
		<div class="row">
			<label>外球释放角速度ω2(°/s)：</label>
			<input type="number" v-model.number="initialOmega2" />
		</div>
		<div class="row">
			<label>仿真时长(s)</label>
			<input type="number" v-model.number="timeRange" min="0" />
		</div>
		<div class="row">
			<label>迭代步长(s)</label>
			<input v-model.number="stepLength" disabled />
		</div>
		<div class="row">
			<label>内球释放角度θ1(°)：</label>
			<input type="number" v-model.number="initialTheta1" @input="preview" />
		  <el-slider class="slider" v-model="initialTheta1" @input="preview" :show-tooltip="false" :min="0" :max="360"></el-slider>
		</div>
		<div class="row">
			<label>内球释放角度θ2(°)：</label>
			<input type="number" v-model.number="initialTheta2" @input="preview" />
		  <el-slider class="slider" v-model="initialTheta2" @input="preview" :show-tooltip="false" :min="0" :max="360"></el-slider>
		</div>
		<div class="controlButton">
			<el-button id="startButton" @click="startSimulation" type="primary" round>开始仿真</el-button>
			<el-button id="graphsButton" @click="replay" type="primary" round>重新播放</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'left-box',
		computed: {
			m1: {
				get() {
					return this.$store.state.m1
				},
				set(value) {
					this.$store.commit('m1', value)
				}
			},
			
			m2: {
				get() {
					return this.$store.state.m2
				},
				set(value) {
					this.$store.commit('m2', value)
				}
			},
			
			l1: {
				get() {
					return this.$store.state.l1
				},
				set(value) {
					this.$store.commit('l1', value)
				}
			},
			
			l2: {
				get() {
					return this.$store.state.l2
				},
				set(value) {
					this.$store.commit('l2', value)
				}
			},
			
			g: {
				get() {
					return this.$store.state.g
				},
				set(value) {
					this.$store.commit('g', value)
				}
			},
			
			initialTheta1: {
				get() {
					return this.$store.state.initialTheta1
				},
				set(value) {
					this.$store.commit('initialTheta1', value)
				}
			},
			
			initialTheta2: {
				get() {
					return this.$store.state.initialTheta2
				},
				set(value) {
					this.$store.commit('initialTheta2', value)
				}
			},
			
			initialOmega1: {
				get() {
					return this.$store.state.initialOmega1
				},
				set(value) {
					this.$store.commit('initialOmega1', value)
				}
			},
			
			initialOmega2: {
				get() {
					return this.$store.state.initialOmega2
				},
				set(value) {
					this.$store.commit('initialOmega2', value)
				}
			},
			
			timeRange: {
				get() {
					return this.$store.state.timeRange
				},
				set(value) {
					this.$store.commit('timeRange', value)
				}
			},
			
			stepLength: {
				get() {
					return this.$store.state.stepLength
				},
				set(value) {
					this.$store.commit('stepLength', value)
				}
			},
		},
		methods: {
			startSimulation() {
				this.$router.push('DrawArea')
				this.$store.commit('startSimulation')
			},
			
			replay() {
				this.$store.commit('draw')
			},
			
			preview() {
				if(this.$store.state.isRunningNow == false) {
					this.$router.push('PreviewArea')
					this.$store.commit('preview')
				}
			}
		}
	}
</script>

<style>
	.leftBox {
		width: 270px;
		height: 800px;
		float: left;
		background-color: #f4f5f7;
	}

	.row {
		margin-left: 10px;
		margin-top: 20px;
	}

	input {
		float: right;
		margin-right: 5px;
		width: 55px;
		border: 2px solid #d8dbe2;
		border-radius: 5px;
	}

	input:focus {
		outline: 0;
		border: 2px solid #949caf;
	}

	.slider {
		width: 250px;
	}
	
	.controlButton {
		margin-top: 250px;
		display: flex;
		justify-content: space-evenly;
	}
	
	/* #startButton {
		flex-grow: 1;
	}
	
	#graphsButton {
		flex-grow: 1;
	} */
</style>
